Solved ‘Module ‘Cannot find name ‘CognitoHostedUIIdentityProvider’.’ error

Hi, I am Charu from Classmethod.In this short blog, we will talk about how to solve Cannot find name 'CognitoHostedUIIdentityProvider'. error.

I was working with Google SSO in AWS Cognito when I got this error.

In my frontend code, I configured Amplify with the region, user pool ID, and user pool web client ID. However, in order to enable Google login, an extra configuration was needed. I am not sure if this setting is correct as of now, but will share how I solved this error in the process of enabling Google SSO.

My Previous Code Snippet:

import { Authenticator } from "@aws-amplify/ui-react";
import { Amplify, Auth } from "aws-amplify";

const CLOUDFRONT_REGION = process.env.REACT_APP_CLOUDFRONT_REGION || "";
const COGNITO_USER_POOL_ID = process.env.REACT_APP_COGNITO_USER_POOL_ID || "";
const COGNITO_USER_POOL_APP_CLIENT_ID =
  process.env.REACT_APP_COGNITO_USER_POOL_APP_CLIENT_ID || "";

Amplify.configure({
  Auth: {
    region: CLOUDFRONT_REGION,
    userPoolId: COGNITO_USER_POOL_ID,
    userPoolWebClientId: COGNITO_USER_POOL_APP_CLIENT_ID,
  },
});

What I tried?

import { Authenticator } from "@aws-amplify/ui-react";
import { Amplify, Auth, CognitoHostedUIIdentityProvider } from "aws-amplify";

const CLOUDFRONT_REGION = process.env.REACT_APP_CLOUDFRONT_REGION || "";
const COGNITO_USER_POOL_ID = process.env.REACT_APP_COGNITO_USER_POOL_ID || "";
const COGNITO_USER_POOL_APP_CLIENT_ID =
  process.env.REACT_APP_COGNITO_USER_POOL_APP_CLIENT_ID || "";

Amplify.configure({
  Auth: {
    region: CLOUDFRONT_REGION,
    userPoolId: COGNITO_USER_POOL_ID,
    userPoolWebClientId: COGNITO_USER_POOL_APP_CLIENT_ID,
  },
});

Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google });

But I got this error:

Cannot find name 'CognitoHostedUIIdentityProvider'.

How I change my code-

Then I change my code to this:

import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";
import { Authenticator } from "@aws-amplify/ui-react";
import { Amplify, Auth } from "aws-amplify";

const CLOUDFRONT_REGION = process.env.REACT_APP_CLOUDFRONT_REGION || "";
const COGNITO_USER_POOL_ID = process.env.REACT_APP_COGNITO_USER_POOL_ID || "";
const COGNITO_USER_POOL_APP_CLIENT_ID =
  process.env.REACT_APP_COGNITO_USER_POOL_APP_CLIENT_ID || "";

Amplify.configure({
  Auth: {
    region: CLOUDFRONT_REGION,
    userPoolId: COGNITO_USER_POOL_ID,
    userPoolWebClientId: COGNITO_USER_POOL_APP_CLIENT_ID,
  },
});
Auth.federatedSignIn({
  provider: CognitoHostedUIIdentityProvider.Google,
});

Make sure to import CognitoHostedUIIdentityProvider above @aws-amplify/ui-react or else it will throw another error saying-

`@aws-amplify/auth/lib/types` import should occur before import of `@aws-amplify/ui-react`

Thank for reading!

Happy Learning:)